<template>
  <div class="bigBox">
    <!-- 简历完善度 -->
    <div class="switch-container">
      <span class="wanshan">简历完善度</span>
      <span class="allScore">建立综合得分XX分</span>
    </div>
    <!-- 主体部分 -->
    <div class="block main-container">
      <el-timeline>
        <!-- 简历未查看需要反馈 -->
        <el-timeline-item
          placement="top"
          color="green"
          size="large"
          class="item-container fankuiBox"
          v-if="status === '未查看'"
        >
          <img src="../../assets/talent-icon/icon1-1.png" class="my-icon1" />
          <el-card class="card-container">
            <h4 class="distance textB">反馈状态</h4>
            <span>还未反馈</span>
            <div>创建时间：</div>
          </el-card>
        </el-timeline-item>
        <!-- 简历未通过 -->
        <el-timeline-item
          placement="top"
          color="green"
          size="large"
          class="item-container meiguoBox"
          v-else-if="status === '求职'"
        >
          <img src="../../assets/talent-icon/icon1-2.png" class="my-icon1" />
          <el-card class="card-container">
            <h4 class="distance textB">求职状态</h4>
            <div class="distance">
              <span>是否通过：</span>
              <span style="color: red">未通过</span>
            </div>
            <div class="distance">
              <span>具体原因：</span>
              <span>资料虚假</span>
            </div>
            <div>审核时间：</div>
          </el-card>
        </el-timeline-item>
        <!-- 已录用的简历 -->
        <el-timeline-item
          placement="top"
          color="green"
          size="large"
          class="item-container luyongBox"
          v-else-if="status === '已录用'"
        >
          <img src="../../assets/talent-icon/icon1-3.png" class="my-icon1" />
          <el-card class="card-container">
            <h4 class="distance textB">求职状态</h4>
            <span class="distance">
              <span>是否通过：</span>
              <span style="color: red">已通过</span>
            </span>
            <div>审核时间：</div>
          </el-card>
        </el-timeline-item>
        <!-- 已入职的简历 -->
        <el-timeline-item
          placement="top"
          color="green"
          size="large"
          class="item-container ruzhiBox"
          v-else-if="status === '已入职'"
        >
          <img src="../../assets/talent-icon/icon1-4.png" class="my-icon1" />
          <el-card class="card-container">
            <h4 class="distance textB">面试状态</h4>
            <div class="distance">
              <span>是否通过：</span>
              <span style="color: red">已通过</span>
            </div>
            <div>入职时间：</div>
          </el-card>
        </el-timeline-item>

        <el-timeline-item placement="top" size="large">
          <img src="../../assets/talent-icon/icon2.png" class="my-icon1" />
          <el-card>
            <h4 class="distance textB">基本概要</h4>
            <div class="distance">
              <span style="font-weight: 600; font-size: 16px">{{
                loginNewData.tName
              }}</span
              >&nbsp;&nbsp; <span>{{ loginNewData.tSex }}</span>&nbsp;
              <span>{{ loginNewData.tNation }}</span
              >&nbsp; <span>{{ loginNewData.tStudy }}</span
              >&nbsp;
              <span>身高{{ loginNewData.tHeight }}CM</span>
            </div>
            <div class="distance">
              <span>出生日期：{{ loginNewData.tFirstDate }}</span
              >&nbsp;&nbsp;&nbsp;
              <span>现年：24 岁</span>
            </div>
            <div class="distance">
              <span>应聘岗位：{{ loginNewData.tJob }}</span
              >&nbsp;&nbsp;&nbsp;
              <span>期望月薪：</span>
              <span style="color: red">{{ loginNewData.tSalary }}元</span>
            </div>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <img src="../../assets/talent-icon/icon3.png" class="my-icon1" />
          <el-card>
            <h4 class="distance textB">联系方式</h4>
            <p class="distance">电话：{{ loginNewData.tPhone }}</p>
            <p class="distance">邮箱：{{ loginNewData.tEmail }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <img src="../../assets/talent-icon/icon4.png" class="my-icon1" />
          <el-card>
            <h4 class="distance textB">教育背景</h4>
            <div>
              <span class="distance complete">完善此项：+15分</span>
              <el-button class="fanKui" @click="toDetailesInfo"
                >点击这里完善此项</el-button
              >
            </div>
            <!-- <div>教育背景内容</div> -->
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <img src="../../assets/talent-icon/icon5.png" class="my-icon1" />
          <el-card>
            <h4 class="distance textB">掌握技能</h4>
            <div>
              <span class="distance complete">完善此项：+15分</span>
              <el-button class="fanKui" @click="toDetailesInfo"
                >点击这里完善此项</el-button
              >
            </div>
            <!-- <div>掌握技能内容</div> -->
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <img src="../../assets/talent-icon/icon6.png" class="my-icon1" />
          <el-card>
            <h4 class="distance textB">工作经历</h4>
            <div>
              <span class="distance complete">完善此项：+15分</span>
              <el-button class="fanKui" @click="toDetailesInfo"
                >点击这里完善此项</el-button
              >
            </div>
            <!-- <div>工作经历内容</div> -->
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <img src="../../assets/talent-icon/icon7.png" class="my-icon1" />
          <el-card>
            <h4 class="distance textB">自我评价</h4>
            <div>
              <span class="distance complete">完善此项：+15分</span>
              <el-button class="fanKui" @click="toDetailesInfo"
                >点击这里完善此项</el-button
              >
            </div>
            <div>自我评价内容</div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: "InfoDetail",
  data() {
    return {
      loginUserInfo: {},
      loginNewData: {},
      status: "",
    };
  },
  computed: {
    getAge(){
        let age = this.loginNewData.tFirstDate
        let bY = age.split('-')[0]
    }
  },
  methods: {
    toDetailesInfo() {
      this.$router.push({
        name: "detail",
      });
    },
    //拿到登陆人员最新信息
    async getNewInfo() {
      let nid = this.loginUserInfo.tId;
      await this.$axios
        .get(`/talents/showLoginAndPasswrod/${nid}`)
        .then((res) => {
          this.status = res.data.data.tStatus;
          this.loginNewData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.loginUserInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
  mounted() {
    this.getNewInfo();
  },
};
</script>

<style scoped>
.bigBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 15px;
  margin-bottom: 15px;
}
/* 预览央视三个按钮 */
.btn1 {
  height: 30px;
  background-color: rgb(25, 166, 137);
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  border: none;
  border-radius: 5px;
  color: white;
  margin-left: 10px;
  vertical-align: middle;
}
.btn1:hover {
  background-color: rgb(12, 109, 90);
}
/* 预览这一行 */
.switch-container {
  /* border:1px solid red; */
  text-align: center;
  margin-bottom: 25px;
}
/* 简历完善度这一行 */
.wanshan {
  /* border:1px solid pink; */
  width: 100px;
  height: 30px;
  line-height: 30px;
  background-color: rgb(237, 86, 102);
  font-size: 12px;
  color: white;
  border-radius: 5px;
  padding: 8px;
  margin-right: 10px;
}
.wanshan:hover {
  background-color: rgb(174, 56, 68);
}
.allScore {
  /* border:1px solid pink; */
  width: 100px;
  height: 30px;
  line-height: 30px;
  background-color: rgb(249, 141, 159);
  font-size: 12px;
  color: white;
  border-radius: 5px;
  padding: 8px;
}
.allScore:hover {
  background-color: rgb(218, 127, 142);
}
/* 内容主体部分 */
.main-container {
  width: 90%;
  margin: auto;
}
.item-container {
  position: relative;
}
/* 一个方块主体 */
/* .card-container{
        
    } */
/* 反馈按钮 */
.fanKui {
  border: none;
  font-weight: 600;
  color: red;
}
/* 自己插入的图片图标 */
.my-icon1 {
  height: 33px;
  width: 33px;
  display: inline-block;
  position: absolute;
  top: 1px;
  left: -10px;
  /* border: 1px solid black; */
  border-radius: 33px;
}
/* 设置上下间距 */
.distance {
  margin-bottom: 8px;
}
/* 完善字 */
.complete {
  color: rgb(27, 179, 148);
  font-weight: 600;
}
/* 小标题文字 */
.textB {
  font-size: 18px;
}
</style>